<template>
  <app-page>
    <div class="filter_index">
      <Editfilter v-loading="store.state.filterShow" />
      <Matchtable />
      <Handicap />
    </div>

    <SaveFilter v-model="store.state.showfilterName" :title="`保存过滤器`"/>
    <FilterList v-model="store.state.showfilterList"/>
    <FilterEdit v-model="store.state.showfilteredit" :title="`编辑过滤器`"/>
  </app-page>
</template>

<script setup>
import Editfilter from './editfilter/Index.vue'
import Handicap from './handicap/Index.vue'
import Matchtable from './matchtable/Index.vue'

import SaveFilter from "./editfilter/components/SaveFilter.vue";
import FilterList from "./components/FilterList.vue";
import FilterEdit from "./components/FilterEdit.vue";

import { useFilterStore } from './filter-store.js'

const store = useFilterStore()

provide('Filter', {
  store,
  state: store.state,
})
</script>

<style lang="scss" scoped>
.filter_index {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
}
</style>
